<template>
  <view class="content">
    <view class="box-bg">
      <uni-nav-bar shadow :fixed="true" background-color="rgba(255, 222, 173, 0.3)">
        <block v-slot:left>
          <view class="city">
            <view>
              <text class="uni-nav-bar-text">{{ city }}</text>
            </view>
            <uni-icons type="arrowdown" color="#666" size="18" />
          </view>
        </block>
        <view class="input-view">
          <uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
          <input confirm-type="search" v-model="data.SearchText" class="nav-bar-input" type="text"
            placeholder="输入搜索关键词" />
        </view>
        <block v-slot:right>
          <view class="city" @tap="SearchClick()">
            搜索
          </view>
        </block>
      </uni-nav-bar>
    </view>



    <uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="bannner" :current="current" :mode="mode"
      :dots-styles="data.dotsStyles" field="content">
      <swiper class="swiper-box" @change="change" :current="swiperDotIndex">
        <swiper-item v-for="(item, index) in bannner" :key="index">
          <image style="width: 100%;" :src="item.image" alt=""></image>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>

    <uni-notice-bar showClose single scrollable showIcon :text="data.textbar"></uni-notice-bar>


    <!-- 表格 -->
    <view class="m_table" style="padding: 10px 0;">
      <uni-grid :column="5" :show-border="false" :highlight="true" @change="change">
        <uni-grid-item v-for="(item, index) in data.List" :index="index" :key="index">
          <view class="grid-item-box" style="background-color: #fff; text-align: center;" @tap="classClick(item.link)">
            <image :style="index == 1 ?
              'margin-top: -2px;width: 40px;height: 47px; object-fit: cover;' :
              index == 8 ? 'width: 80px; height: 40px; object-fit: cover;' :
                'width: 50px; height: 50px; object-fit: cover;'" :src="item.img"></image>
            <text class="text" style="display: block;" :style="index == 1 ?
              'margin-top: 5px;' :
              index == 8 ? 'margin-top: 10px;' : ''
              ">{{ item.title }}</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </view>

    <!-- 商品列表 -->
    <view class="shangp">
      <view v-for="(item, index) in data.dataList" :key="index">
        <uni-card padding="10px 0" :is-shadow="true">
          <view class="card_con" style="height: 600rpx;">
            <view style="width: 50%;">
              <image :src="item.img" style="width: 100%; height: 100%; object-fit: cover;"></image>
            </view>
            <view style="width: 50%; height: 100%;">
              <uni-grid :column="2" :highlight="true" :show-border="false" @change="">
                <uni-grid-item v-for="(item2, index2) in item.data" :index="index2" :key="index2" style="height: 280rpx;">
                  <view style="height: 70%; padding: 10rpx;">
                    <image style="width: 100%; height: 100%; object-fit: cover;" :src="item2.img"></image>
                    <text style="display: block; text-align: center;">{{ item2.title }}</text>
                    <text
                      style="display: block; text-align: center; color: red; font-size: 20rpx; line-height: 20rpx;">¥{{
                        item2.price }}</text>
                  </view>
                </uni-grid-item>
              </uni-grid>
            </view>
          </view>
        </uni-card>
      </view>
    </view>

    <!-- 商品列表 -->
    <div style="display: grid; grid-template-columns: repeat(2, 1fr);">
      <uni-card style="padding: 0;" v-for="(item, index) in data.newData" :key="index" @click="goXiang(item.g_id)" >
        <image style="width: 100%;height: 250rpx;" :src="item.g_img[0] ? item.g_img[0].url : ''"></image>
        <view style="width: 100%; padding: 20rpx; display: flex;flex-direction: column;justify-content: space-between;">
          <view>{{ item.g_name }}</view>
          <view style="width: 80%;
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    -webkit-box-orient: vertical;
                    ">{{ item.g_info }}</view>
          <view style="width: 100%;">
            <text style="color: red; margin-right: 20rpx;">￥{{ item.g_price }}</text>
            <text>剩余库存:{{ item.g_count }}</text>
          </view>
        </view>
      </uni-card>

    </div>
    <uni-load-more :status="data.status" :content-text="data.contentText" />
  </view>
</template>


<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue'
import { bannerListApi, goodsListApi } from '../../https/http'
import { onLoad, onReachBottom } from "@dcloudio/uni-app"

const city = ref('北京')
const data = reactive<{
  bannner: {
    image: string
  }[]
  dataList: {
    img: string,
    data: {
      img: string,
      title: string,
      price: number
    }[]
  }[]
  List: {
    title: string
    img?: string
    link?: string
  }[]
  newData: any
  current: number,
  mode: string,
  swiperDotIndex: number
  textbar: string
  dotsStyles: {}
  status: string
  contentText: {},
  SearchText: string
  currentPage:number
  pagesize:number
}>({
  newData: [],
  bannner: [
  ],
  dataList: [{
    img: "https://img.9xun.com/newstatic/19784/04b5c464aff4f5a8.jpg.webp",
    data: [{
      img: "https://img.stsmt.com/newstatic/34285/089112792b158dfa.png.webp",
      title: "华为",
      price: 9999
    }, {
      img: "https://img.stsmt.com/newstatic/34282/08935dccfaab23b5.png.webp",
      title: "苹果",
      price: 22222
    }, {
      img: "https://img.stsmt.com/newstatic/34282/08935dccfaab23b5.png.webp",
      title: "华为",
      price: 9999
    }, {
      img: "https://img.stsmt.com/newstatic/34285/089112792b158dfa.png.webp",
      title: "苹果",
      price: 22222
    }]
  }],
  List: [
    {
      title: "苹果手机",
      img: "../../static/apple.jpg",
      link: "苹果"
    },
    {
      title: "华为手机",
      img: "../../static/HuaWei.jpg",
      link: "华为"
    },
    {
      title: "平板",
      img: "../../static/pad.jpg",
      link: "平板"
    },
    {
      title: "笔记本",
      img: "../../static/computer.jpg",
      link: "笔记本电脑"
    },
    {
      title: "耳机",
      img: "../../static/headset.jpg",
      link: "耳机"
    },
    {
      title: "数码潮玩",
      img: "../../static/UAV.jpg",
      link: ""
    },
    {
      title: "摄影摄像",
      img: "../../static/Camera.jpg",
      link: "相机"
    },
    {
      title: "掌机娱乐",
      img: "../../static/PSP.jpg",
      link: "游戏机"
    },
    {
      title: "鼠标键盘",
      img: "../../static/Mouse.jpg",
      link: "外设"
    },
    {
      title: "智能手环",
      img: "../../static/watch.jpg",
      link: "手环"

    },
  ],
  current: 0,
  mode: 'round',
  swiperDotIndex: 0,
  status: "more", //more	加载前  loading	加载中  no-more 没有更多数据
  textbar: "逃之夭夭，灼灼其华",
  dotsStyles: {
    backgroundColor: 'rgba(255, 90, 95,0.3)',
    border: '1px rgba(255, 90, 95,0.3) solid',
    color: '#fff',
    selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
    selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
  },
  contentText: {
    contentdown: '查看更多',
    contentrefresh: '加载中',
    contentnomore: '没有更多'
  },
  SearchText: "",
  currentPage:1,
  pagesize:10
})
onMounted(async () => {
  data.newData = []
  data.status = "more"
  data.currentPage = 1
  data.pagesize = 10
  const res = await bannerListApi(1, 100)
  if (res.code == 200) {
    data.bannner = []
    res.data.forEach(e => {
      data.bannner.push({ image: e.fields.banner_img })
    })
  }
  newdatalsit()
})
onReachBottom(async() => {
    if (data.status == "more") {
        data.currentPage = data.currentPage + 1
        await newdatalsit()
    }
})
const newdatalsit =async () => {
  const res = await goodsListApi(data.currentPage,data.pagesize)
  if (res.code == 200) {
        res.data.forEach(e => {
            if (e.g_img) {
                e.g_img = JSON.parse((e.g_img as any));
            }
            data.newData.push(e)
        })
    }
    if (data.newData.length >= (res.count as any)){
        data.status = "no-more"
    }else{
        data.status = "more"
    }
}
const clickItem = (e: any) => {
  data.swiperDotIndex = e
}
const change = (e: any) => {
  data.current = e.detail.current
}
const classClick = (link?: string) => {
  uni.navigateTo({
    url: `/pages/Search/Search?key=${link}`
  });

}
const SearchClick = () => {
  uni.navigateTo({
    url: `/pages/Search/Search?key=${data.SearchText}`
  });
}
const goXiang = (id:number) => {
  uni.navigateTo({
    url: `/pages/detail/detail?g_id=${id}`
  });
}

const { bannner, current, mode, swiperDotIndex } = toRefs(data)
</script>

<style lang="scss">
$nav-height: 30px;

.box-bg {
  background-color: #F5F5F5;
}

.city {
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  // width: 160rpx;
  margin-left: 4px;
}

.input-view {
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  // width: 500rpx;
  flex: 1;
  background-color: #f8f8f8;
  height: $nav-height;
  border-radius: 15px;
  padding: 0 15px;
  flex-wrap: nowrap;
  margin: 7px 0;
  line-height: $nav-height;
}

.input-uni-icon {
  line-height: $nav-height;
}

.nav-bar-input {
  height: $nav-height;
  line-height: $nav-height;
  /* #ifdef APP-PLUS-NVUE */
  width: 370rpx;
  /* #endif */
  padding: 0 5px;
  font-size: 12px;
  background-color: #f8f8f8;
}

.swiper-box {
  height: 200px;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.image {
  width: 750rpx;
}

.card_con {
  display: flex;
}
</style>


